<template>
  <div class="page-filter">
    <div class="page-filter-left">
      <a-button type="primary" @click="createAd">新建广告库</a-button>
    </div>
    <div class="page-filter-right">
      <a-input
        :maxlength="19"
        :onkeyup="
          () => {
            if (adState.id) adState.id = adState.id.replace(/\D/g, '')
          }
        "
        :onafterpaste="
          () => {
            if (adState.id) adState.id = adState.id.replace(/\D/g, '')
          }
        "
        v-model:value.trim="adState.id"
        class="w-[192px] h-[32px] mr-[24px]"
        placeholder="请输入广告库ID"
      />
      <a-input
        v-model:value.trim="adState.name"
        class="w-[192px] h-[32px] mr-[16px]"
        placeholder="请输入广告库名称关键词"
      />
      <a-button type="primary" class="mr-[8px]" @click="handleSearch">搜索</a-button>
      <a-button class="mr-[24px]" @click="handleReset">重置</a-button>
      <a-tooltip
        placement="bottom"
        class="common-icon"
        color="#fff"
        :class="isModuleCheck()"
        @click="handleClick(true)"
      >
        <template #title>
          <span class="common-icon text-[#5e5e5e]"> 列表视图 </span>
        </template>
        <i class="iconfont icon-liebiao text-[18px]"></i>
      </a-tooltip>
      <a-tooltip placement="bottom" class="common-icon" color="#fff" :class="isListCheck()" @click="handleClick(false)">
        <template #title>
          <span class="common-icon text-[#5e5e5e]"> 模块视图 </span>
        </template>
        <i class="iconfont icon-mokuai text-[18px]"></i>
      </a-tooltip>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted } from 'vue'
import { adState, statusState, resetState } from '../state'
import { useRouter } from 'vue-router'
const emit = defineEmits(['update-list'])
const router = useRouter()
const createAd = () => {
  router.push({ name: 'EditAd' })
}
const isModuleCheck = computed(() => () => {
  return statusState.isActiveModule ? 'blue-icon' : ''
})
const isListCheck = computed(() => () => {
  return !statusState.isActiveModule ? 'blue-icon' : ''
})
const handleClick = (type: boolean) => {
  statusState.isActiveModule = type
}
const handleSearch = () => {
  console.log(adState)
  emit('update-list')
  statusState.isBySearch = true
}
const handleReset = () => {
  resetState()
  emit('update-list')
  console.log(adState)

  statusState.isBySearch = false
}
onMounted(() => {
  resetState()
})
</script>

<style lang="less" scoped>
.iconfont {
  margin-right: 0;
}
:deep(.blue-icon) {
  border: 1px solid #0083ff !important;
  color: #0083ff;
}

.page-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  &-right {
    display: flex;
    align-items: center;
    .common-icon {
      width: 36px;
      height: 31px;
      line-height: 31px;
      text-align: center;
      border: 1px solid #d9d9d9;
      background-color: #f6f6f6;
      cursor: pointer;
    }
  }
}
</style>
